<template>
    <div class="toolbarBox">
      <div class="to-item">
        <div class="to-label">字体：</div>
        <div class="to-cont">
          <el-select placeholder="字体风格" @change="handleAction('fontFamily', $event)" v-model="styles.fontFamily"
            @click.stop>
            <el-option v-for="item in fontOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <el-select placeholder="字体大小" @change="handleAction('fontSize', $event)" v-model="styles.fontSize" @click.stop>
            <el-option v-for="item in sizeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
          <!-- <span @click="handleAction('fontWeight', $event)">B</span> -->
        </div>
      </div>
      <div class="to-item">
        <div class="to-label">颜色：</div>
        <div class="to-cont">
          <div class="color-picker-container" @click.stop>
            <!-- 触发颜色选择器的按钮 -->
            <div class="color-input-wrapper">
              <input type="text" v-model="styles.backgroundColor" @click="toggleColorPanel" class="color-input" readonly
                :style="{ backgroundColor: styles.backgroundColor }" />
            </div>
  
            <!-- 颜色选择面板 -->
            <div v-if="panelVisible" class="color-panel" @click.stop>
              <div v-for="(color, index) in colorList" :key="index" class="color-box" :style="{ backgroundColor: color }"
                @click="handleAction('backgroundColor', color)"
                :class="color === styles.backgroundColor ? 'active' : ''" />
            </div>
          </div>
        </div>
      </div>
      <div class="to-item">
        <div class="to-label">形状：</div>
        <div class="to-cont">
          <img v-for="item in shapeOptions" :key="item.value" :src="item.img" :alt="item.label"
            :class="item.value === styles.shape ? 'active' : ''" @click="handleAction('shape', item.value)">
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { defineEmits, defineProps, toRefs, reactive, ref } from 'vue';
  
  const fontOptions = [
    { label: 'Arial', value: 'Arial' },
    { label: 'Verdana', value: 'Verdana' },
    { label: 'Times New Roman', value: 'Times New Roman' },
    { label: 'Courier New', value: 'Courier New' },
  ];
  
  const sizeOptions = [
    { label: '10px', value: '10px' },
    { label: '12px', value: '12px' },
    { label: '14px', value: '14px' },
    { label: '16px', value: '16px' },
    { label: '18px', value: '18px' },
    { label: '20px', value: '20px' },
    { label: '22px', value: '22px' },
    { label: '24px', value: '24px' },
    { label: '26px', value: '26px' },
    { label: '28px', value: '28px' },
    { label: '30px', value: '30px' },
    { label: '32px', value: '32px' },
    { label: '34px', value: '34px' },
  ];
  
  const colorList = [
    '#E4E7ED', '#ffffff', '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
    '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4caf50', '#8bc34a',
    '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722', '#795548',
    '#607d8b', '#9e9e9e'
  ];
  
  const shapeOptions = [
    { label: '长方形', value: '1', img: require('@/assets/icon/tool-cfxBR.svg') },
    { label: '菱形', value: '2', img: require('@/assets/icon/tool-lx.svg') },
    { label: '椭圆形', value: '3', img: require('@/assets/icon/tool-tyx.svg') },
  ];
  
  const props = defineProps({
    item: {
      type: Object,
      required: true
    },
  });
  
  const defaultStyles = {
    fontFamily: 'Arial',
    fontSize: '14px',
    backgroundColor: '#E4E7ED',
    shape: '1',
  };
  
  const { item } = toRefs(props);
  const itemData = reactive({ ...item.value });
  const styles = reactive(item?.value?.styles || defaultStyles);
  const panelVisible = ref(false);
  
  const emit = defineEmits(['updateStyle']);
  const handleAction = (type, value) => {
    switch (type) {
      case 'fontFamily':
        styles.fontFamily = value;
        break;
      case 'fontSize':
        styles.fontSize = value;
        break;
      // case 'fontWeight':
      //     styles.fontWeight = value;
      //     break;
      case 'backgroundColor':
        styles.backgroundColor = value;
        panelVisible.value = false;
        break;
      case 'shape':
        styles.shape = value;
        break;
      default:
        console.warn(`Unknown type: ${type}`);
    }
  
    console.log("handleAction", styles);
    itemData.styles = styles;
    // 发射更新事件
    // emit('updateStyle', itemData);
    emit('updateStyle', { ...props.item, styles: styles });
  };
  
  // 显示隐藏颜色选择面板
  const toggleColorPanel = () => {
    panelVisible.value = !panelVisible.value;
  };
  
  </script>
  
  <style lang="scss" scoped>
  .toolbarBox {
    box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, .3);
    padding: 10px;
    border-radius: 5px;
    box-sizing: border-box;
  
    .to-item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;
  
      &:last-child {
        margin-bottom: 0px;
      }
  
      .to-label {
        width: 60px;
      }
  
      .to-cont {
        display: flex;
  
        ::v-deep .el-select__wrapper {
          min-height: 24px;
          padding: 0px 4px;
          width: 80px;
          font-size: 12px;
        }
  
        ::v-deep .el-color-picker__trigger {
          border-radius: 2px;
          height: 24px;
          padding: 3px;
          width: 80px;
          box-sizing: border-box;
        }
  
        img {
          width: 26px;
          margin-right: 10px;
          cursor: pointer;
  
          &.active {
            border: 1px solid var(--el-border-color);
          }
        }
      }
    }
  }
  
  .color-picker-container {
    position: relative;
    display: inline-block;
  
    .color-input-wrapper {
      position: relative;
  
      .color-input {
        width: 78px;
        height: 22px;
        border: 1px solid #ccc;
        border-radius: 4px;
        cursor: pointer;
        padding: 5px;
        text-align: center;
        color: #fff;
        padding: 0px;
      }
    }
  
    .color-panel {
      position: absolute;
      top: 35px;
      left: 0;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 5px;
      border: 1px solid #ccc;
      border-radius: 4px;
      background-color: #fff;
      padding: 10px;
      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
      z-index: 100;
  
      .color-box {
        width: 30px;
        height: 30px;
        border-radius: 4px;
        cursor: pointer;
        box-sizing: border-box;
  
        &.active {
          border: 1px solid #333;
        }
  
        &:hover {
          border: 1px solid #333;
        }
      }
    }
  }
  </style>